<template>
  <el-collapse-item v-if="scoreInfo.children && scoreInfo.children.length" :title="scoreInfo.assessName" :name="scoreInfo.busId">
    <PreviewScore v-for="child in scoreInfo.children" :key="child.busId" :score="child"></PreviewScore>
  </el-collapse-item>
  <div v-else class="score-item">
    <div class="score-item-name">{{ scoreInfo.assessName || '指标名称' }}</div>
    <div v-if="scoreInfo.optionList && scoreInfo.optionList.length" class="score-item-option">
      <el-button
        size="small"
        v-for="(option, inx) in scoreInfo.optionList"
        :key="option.optionId"
        :type="option.selected ? 'warning' : 'default'"
        @click.stop="selectOption(inx)">
        {{ option.optionLabel }}
      </el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PreviewScore',
  props: {
    score: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      scoreInfo: {},
    }
  },
  watch: {
    score: {
      handler(obj) {
        if (obj && obj.busId) {
          this.scoreInfo = JSON.parse(JSON.stringify(obj))
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    selectOption(n) {
      const optionList = JSON.parse(JSON.stringify(this.scoreInfo.optionList))
      optionList.forEach((item, inx) => {
        optionList[inx].selected = n === inx
      })
      this.scoreInfo.optionList = optionList.concat()
    },
  },
}
</script>
<style lang="scss" scoped>
.el-collapse-item {
  .score-item {
    margin-bottom: 16px;
    .score-item-name {
      border-left: 3px solid #409eff;
      padding-left: 10px;
      margin-bottom: 8px;
      font-size: 13px;
    }
    .el-button {
      width: 80px;
    }
  }
  .el-collapse-item__content .el-collapse-item {
    padding-left: 20px;
  }
}
</style>
